import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import './index.css'
class CourseCard extends Component {
  toCourse = async () => {
    const {
      props,
      props: { history, toObj },
    } = this
    if (props.beforeClick) {
      await props.beforeClick()
    }
    history.push(toObj)
  }
  render() {
    const { courseInfo } = this.props
    return (
      <div className="course-card" onClick={this.toCourse}>
        <div className="card-box">
          <div className="course-img">
            <img src={courseInfo.courseImg} alt={courseInfo.courseName} />
          </div>
          <div className="course-info">
            <div className="course-name">{courseInfo.courseName}</div>
            <div className="course-price_hours">
              <div className="course-price">
                价格：
                <span className="price">
                  {courseInfo.courseMinPrice}-{courseInfo.courseMaxPrice}
                </span>
              </div>
              <div className="course-hours">
                课时：
                <span
                  style={{
                    color: '#FF9635',
                  }}
                >
                  {courseInfo.classHour}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(CourseCard)
